<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>
    <!--重置样式-->
    <link rel="stylesheet" href="../css/normalize.css">
    <!--公共样式-->
    <link rel="stylesheet" href="../css/common.css">
    <!--当前页样式-->
    <link rel="stylesheet" href="../css/product-list.css">
</head>

<body>
    <!--头部导航-->
    <div class="head container-fluid">

        <div class="head1 clearfix ">
            <div class="container">
                <h2>欢迎来到HOUSE家居网</h2>
                <p>
                    <a class="tel" href="./contact-us.html"> <img src="../images/tel.png" alt=""> 400-00-000xxx</a>
                    <a class="eml" href="./contact-us.html"> <img src="../images/mail.png" alt=""> 1234567xxx@gmail.com</a>
                </p>
            </div>
        </div>
        <div class="head2 clearfix container  ">
            <div class=" fl  ">
                <img src="../images/logo.png" alt="">
            </div>
            <ul class="fr  ">
                <li> <a class="active" href="./home.html">首页</a></li>
                <li><a href="./about.html">关于我们</a></li>
                <li><a href="./product-list.html">产品展示</a></li>
                <li><a href="./news-list.html">新闻动态</a></li>
                <li><a href="./Online-Message.html">在线留言</a></li>
                <li><a href="./contact-us.html">联系我们</a></li>
            </ul>
        </div>
    </div>

    <!--广告-->
    <div class="banner container-fluid "></div>

    <!--首页导航-->
    <div class="list container-fluid">
        <div class="list-nav container">
            <p>首页&gt;&gt;产品展示</p>
        </div>
    </div>
    <!--产品展示-->
    <div class="product container   clearfix ">
        <h2 class="active">产品展示 <span>OUR PRODUCTS</span></h2>
        <div class="product-l fl">
            <div class="prol-1">
                <ul>
                    <li><a href="#">床上用品</a></li>
                    <li><a href="#">家居饰品</a></li>
                    <li><a href="#">居家日用</a></li>
                    <li><a href="#">家居收纳</a></li>
                    <li><a href="#">厨房收纳</a></li>
                    <li><a href="#">厨房餐饮</a></li>
                </ul>
            </div>
            <div class="prol-2">
                <img src="../images/02_wqpl.jpg" alt="">
            </div>
        </div>
        <div class="product-r fr  ">
            <ul class="clearfix">
                <li> <a class="photo1" href="./product-details.html"><img src="../images/pro1.png" alt="">
                        <p>实木照片墙 创意绿色小鸟墙贴</p><span>&yen;400.00</span>
                    </a></li>
                <li> <a class="photo2" href="#"><img src="../images/pro2.png" alt="">
                        <p>全悦18框实木照片墙创意相片墙</p><span>&yen;189.00</span>
                    </a></li>
                <li> <a class="photo3" href="#"><img src="../images/pro3.png" alt="">
                        <p>地中海客厅实木照片墙现代简约</p><span>&yen;1500.00</span>
                    </a></li>
            </ul>
            <ul class="clearfix">
                <li> <a class="photo1" href="#"><img src="../images/pro4.png" alt="">
                        <p>椭圆相框照片墙家居饰品创意复古墙</p><span>&yen;800.00</span>
                    </a></li>
                <li> <a class="photo2" href="#"><img src="../images/pro5.png" alt="">
                        <p>浴室吸水防滑进门地垫卫生间丝脚垫</p><span>&yen;500.00</span>
                    </a></li>
                <li> <a class="photo3" href="#"><img src="../images/pro6.png" alt="">
                        <p>可爱小脚丫浴室门口吸水防滑地垫</p><span>&yen;250.00</span>
                    </a></li>
            </ul>
            <ul class="clearfix">
                <li> <a class="photo1" href="#"><img src="../images/pro7.png" alt="">
                        <p>长毛柔软地垫客厅卧室浴室地毯垫子</p><span>&yen;220.00</span>
                    </a></li>
                <li> <a class="photo2" href="#"><img src="../images/pro8.png" alt="">
                        <p>客厅卧室茶几沙发欧式加厚丝毛地毯</p><span>&yen;400.00</span>
                    </a></li>
                <li> <a class="photo3" href="#"><img src="../images/pro9.jpg" alt="">
                        <p>杜拓真空压缩袋 11丝加厚真空收纳袋</p><span>&yen;500.00</span>
                    </a></li>
            </ul>
            <ul class="clearfix">
                <li> <a class="photo1" href="#"><img src="../images/pro7.png" alt="">
                        <p>长毛柔软地垫客厅卧室浴室地毯垫子</p><span>&yen;220.00</span>
                    </a></li>
                <li> <a class="photo2" href="#"><img src="../images/pro8.png" alt="">
                        <p>客厅卧室茶几沙发欧式加厚丝毛地毯</p><span>&yen;400.00</span>
                    </a></li>
                <li> <a class="photo3" href="#"><img src="../images/pro9.jpg" alt="">
                        <p>杜拓真空压缩袋 11丝加厚真空收纳袋</p><span>&yen;500.00</span>
                    </a></li>
            </ul>
            <p>
                <span>共 60 条记录</span>
                <a class="one" href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <button>下一页</button>
                <button>尾页</button>
            </p>
        </div>
    </div>
    <!--尾部-->
    <div class="foot  ">
        <div class="foot1  clearfix ">
            <div class="footl  fl   ">
                <img src="../images/logo2.jpg" alt="">
                <p><i class="ico1"></i>中国上海市XXX区XXX路12号XX大厦5层5XX室</p>
                <p><i class="ico2"></i>400-000-XXXX (021)-12345678XX</p>
                <p><i class="ico3"></i>12345678XXX@gmail.com</p>
            </div>
            <div class="footm  fl">
                <h2 class="active">快速链接:</h2>
                <ul>
                    <li><a href="./home.html">&lt; 网站首页</a></li>
                    <li><a href="./product-list.html">&lt; 产品展示</a></li>
                    <li><a href="./Online-Message.html"> &lt;在线留言</a></li>
                    <li><a href="./about.html">&lt; 关于我们</a></li>
                    <li><a href="./news-list.html"> &lt;新闻动态</a></li>
                    <li><a href="./contact-us.html"> &lt;联系我们</a></li>
                </ul>
            </div>
            <div class=" footr fr ">
                <h2 class="active">站内搜索</h2>
                <p class="searh clearfix">
                    <input class="fl" type="text" placeholder="请输入关键字">
                    <button class="fl">搜索</button>
                </p>
                <p class="fx">关注我们 <a href="#"> <img src="../images/fenxiang.png" alt=""></a></p>
            </div>
        </div>
        <p class="sm">Copyright © 2009-2011,www.XXXXXX.com,All rights reserved 沪ICP备XXXXXXX号未经同意,不得转载</p>
    </div>

</body>

</html>